<template>
	<view class="cons_con">
		<!-- <view class="" style="width: 100%;height: 160rpx;margin-top: 20rpx;">
			<u-navbar title="商业" :bgColor="navBgColor" :titleStyle="{ color: navColor }" :leftIconColor="'#000000'"
				fixed >
			</u-navbar>
		</view> -->

		<!-- <view class="add_list">
			<image class="add_li_img"
				:src="syimg"
				mode="" @click="onPreview"></image>
		</view> -->
		
		<view class="conscon1">
			<u-sticky>
				<u-tabs :list="list1" :activeStyle="{  color: '#4BA677 ',fontWeight: 'bold', }"
					:inactiveStyle="{color: '#666666',}" lineColor="#4BA677"
					itemStyle="padding-left: 15px; padding-right: 15px; height: 38px;" :current="currentTab"
					@click=" tabClick"></u-tabs>
			</u-sticky>
		</view>
		
		<view class="grouplist">
			<view class="" v-if="ticketproducts != ''" style="padding-bottom: 230rpx;">
				<!--  -->
				<view class="group_6" v-for="(item,index) in ticketproducts" :key="index" @click="gosport(item,index)">
					<view class="block_3">
						<u--image :src="item.venue_thumb" width="280rpx" height="180rpx" radius="5"></u--image>
					</view>
					<view class="block_4">
						<view class="flex-between">
							<text lines="1" class="text_11" v-if="item.venue_name ? item.venue_name : ''">{{item.venue_name}}</text>
							<!-- <view style="display: flex;align-items: center;justify-content: center; ">
								<view style="color: #999999;font-size: 24rpx;">详情</view>
								<image style="width: 24rpx;height: 24rpx;" :src="jiantou11" mode=""></image>
							</view> -->
						</view>
						<view class="text-wrapper_4">
							<!-- <text lines="1" class="text_12" v-if="item.open ? item.open : ''">{{item.open}}</text> -->
							<text lines="1" class="text_13"
								v-if="item.open_time ? item.open_time : ''">{{item.open_time}}</text>
						</view>
						<view class="image-text_1">
							<image
								src="https://oss.szsportscenter.cn/upload/ce/94680b3a6b8cd898f7b45009fba68f.png?attname=mergeImage.png"
								class="label_4"></image>
							<text lines="1" class="text-group_1" v-if="item.address ?item.address : ''">{{item.address}}</text>
						</view>
						<!-- <view class="group_7">
							<view class="" style="flex-direction: row;display: flex;">
								<view class="text-wrapper_5" v-for="(im,inx) in item.marks.slice(0, 3)" :key="inx">
									<text lines="1" class="text_14">{{im}}</text>
								</view>
							</view>
							
						</view> -->
					</view>
				</view>
		
			</view>
			<view class="group_9" v-if="ticketproducts == ''">
				<u-empty mode="void"
					icon="https://oss.szsportscenter.cn/upload/2d/c9c9d19f7d661666e527715884c630.png?attname=huanxin.png" />
			</view>
		</view>

		<!-- <view class="data-list1">
			<view class="scroll" style="height: auto;">
				<view class="data-item flex-align" v-for="(item, index) in ticketproducts" :key="index"
					@click="ondatalist1(item, index)">
					<view class="image">
						<u--image :src="item.picture" width="240rpx" height="154rpx" radius="5"></u--image>
					</view>
					<view class="detail">
						<view>
							<view class="title ellipsis-1"><text style="font-size: 30rpx;color: #ffaa00"
									v-if="item.inventory == 0">预约</text><text>
									{{ item.venue_name }}</text> </view>
							
						</view>
						
						<view class="flex-between">
							<view class="flex-align">
								<view class="price">￥{{ item.selling_price }}</view>
							</view>
							<view
								style="height: 50rpx;width: 100rpx;background: linear-gradient( 135deg, #FFBD7E 0%, #EC923E 100%), #56BF89;border-radius: 15rpx;font-size: 24rpx;color: #FFFFFF;line-height: 50rpx;text-align: center;">
								购 买
							</view>
						</view>
					</view>
				</view>
				<view class="" v-if="ticketnum.length > 3 && ticketpage == 1"
					style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
					@click="onticket">
					<image style="width: 23.83rpx;height: 20.41rpx;" :src="zx22" mode=""></image>
				</view>
				<view class="" v-if="ticketnum.length > 3 && ticketpage == 2"
					style="width: 100%;height: 80rpx;background-color: #fff;display: flex;justify-content: center;align-items: center;"
					@click="offticket">
					<image style="width: 23.83rpx;height: 20.41rpx;transform: rotate(180deg);" :src="zx22" mode="">
					</image>
				</view>
			</view>
		</view> -->
		<tabber :active="1"></tabber>
	</view>
</template>

<script>
	const subscribe = require('@/api/subscribe/index.js');
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			return {
				navBgColor: 'rgba(255, 255, 255, 0)',
				navColor: '#000000',
				ticketproducts: [],
				venueDetail: {},
				timeData: {},
				menuActive: '',
				products: [],
				id: 0,
				belong: 'court',
				time_list: '',
				each_num: {
					open_time_start: '',
					open_time_end: '',
				},
				windows: '',
				venueDetaillist: [],
				belonglist: {},
				listQuery: { //分页
					pageNo: 1,
					pageSize: 1,
				},
				totalPage: '', //几页
				index_list: {},
				tabindex: 0,
				courtproducts: [],
				cardproducts: [],
				cate_id: '',
				courtpage: 1,
				ticketpage: 1,
				cardpage: 1,
				courtnum: 0,
				ticketnum: 0,
				cardnum: 0,
				syimg:'',
				list1:[],
				currentTab:0
			};
		},
		onLoad() {
			this.getVenueDetail();
		},
		methods: {
			// 获取商铺图片
			async getimage() {
				let postData = {
					project_id: getApp().globalData.projectId,
					app_id: this.$https.weixinAppId,
				};
				let result = await venues.getBannerForDaiJinQuan(postData);
				if (result.code === 1) {
					this.syimg = result.data[0];
				}
			},
			// 获取场馆详情
			async getVenueDetail() {
				let postData = {
					project_id: getApp().globalData.projectId,
				};
				let result = await subscribe.ShopCateindex(postData);
				if (result.code === 1) {
					this.list1 = result.data
					this.cate_id = result.data[0].id
					this.shopindex(result.data[0].id)
				}
			},
			tabClick(item) {
				this.cate_id = item.id
				this.shopindex(item.id)
			},
			async shopindex(id) {
				let postData = {
					project_id: getApp().globalData.projectId,
					shop_cate_id:this.cate_id
				};
				let result = await subscribe.shopindex(postData);
				if (result.code === 1) {
					this.ticketproducts = result.data
				}
			},
			gosport(item, index) {
				console.log(item, index)
				uni.navigateTo({
					url: '/page_commodity/food_mapdetail?foodid=' + item.id
				})
			},
			// onPreview() {
			// 	uni.navigateTo({
			// 		url: "/pages/venues/index?current_Tab=" + 2 + '&addsav=' + 1,
			// 	})
			// }
		}
	};
</script>

<style lang="less" scoped>
	.cons_con {
		.group_6 {
				background-color: rgba(255, 255, 255, 1.0);
				border-radius: 12rpx;
				width: 710rpx;
				padding-bottom: 20rpx;
				flex-direction: row;
				display: flex;
				// justify-content: space-between;
				margin: 28rpx auto 0;
			}
		
			.block_3 {
				border-radius: 10rpx;
				// background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/a0ffd3594354408ab5f6ace6bccb713b_mergeImage.png);
				width: 280rpx;
				height: 180rpx;
				display: flex;
				flex-direction: column;
		
				image {
					border-radius: 10rpx;
					width: 280rpx;
					height: 180rpx;
				}
			}
		
			.block_4 {
				display: flex;
				flex-direction: column;
				margin: 0 0 0 20rpx;
				flex: 1;
			}
		
			.text_11 {
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 28rpx;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 40rpx;
			}
		
			.text-wrapper_4 {
				width: 364rpx;
				flex-direction: row;
				display: flex;
				// justify-content: space-between;
				margin: 10rpx 0 0 0;
			}
		
			.text_12 {
				overflow-wrap: break-word;
				color: rgba(75, 166, 119, 1.0);
				font-size: 26rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 22rpx;
			}
		
			.text_13 {
				overflow-wrap: break-word;
				color: rgba(51, 51, 51, 1);
				font-size: 26rpx;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 40rpx;
			}
		
			.image-text_1 {
				width: 300rpx;
				flex-direction: row;
				display: flex;
				justify-content: flex-start;
				margin: 18rpx 0 0 0;
				align-items: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
		
			}
		
			.label_4 {
				width: 23rpx;
				height: 26rpx;
			}
		
			.text-group_1 {
				overflow-wrap: break-word;
				color: #666666;
				font-size: 26rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 30rpx;
				margin-top: 2rpx;
				height: 30rpx;
				margin-left: 10rpx;
			}
		
			.group_7 {
				margin-top: 16rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
			}
		
			.text-wrapper_5 {
				background-color: rgba(230, 230, 230, 0.6);
				border-radius: 4rpx;
				margin-top: 14rpx;
				display: flex;
				flex-direction: column;
				padding: 7rpx 11rpx 7rpx 11rpx;
				margin-right: 10rpx;
				// width: 80%;
			}
		
			.text_14 {
				overflow-wrap: break-word;
				color: rgba(153, 153, 153, 1);
				font-size: 22rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: center;
				white-space: nowrap;
				line-height: 22rpx;
			}
		
			.text-wrapper_6 {
				background-color: rgba(230, 230, 230, 0.6);
				border-radius: 4rpx;
				display: flex;
				flex-direction: column;
				margin: 14rpx 0 0 10rpx;
				padding: 7rpx 12rpx 7rpx 12rpx;
			}
		
			.text_15 {
				overflow-wrap: break-word;
				color: rgba(153, 153, 153, 1);
				font-size: 22rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: right;
				white-space: nowrap;
				line-height: 22rpx;
			}
		
			.text-wrapper_7 {
				margin-left: 80rpx;
				display: flex;
				flex-direction: column;
				padding: 13rpx 34rpx 13rpx 34rpx;
				background: linear-gradient(135deg, #6BD3A6 0%, #56BF89 100%), #56BF89;
				border-radius: 10rpx;
			}
		
			.text_16 {
				overflow-wrap: break-word;
				color: rgba(255, 255, 255, 1);
				font-size: 26rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 24rpx;
			}
		}
		
		.box_1 {
			// box-shadow: 0px 0px 10px 0px rgba(32, 64, 48, 0.12);
			background-color: rgba(255, 255, 255, 1.0);
			display: flex;
			flex-direction: column;
			padding: 29rpx 12rpx 18rpx 20rpx;
		
			.box_4 {
				background-color: rgba(255, 255, 255, 1.0);
				border-radius: 12rpx;
				display: flex;
				flex-direction: row;
				padding: 0 0 20rpx 0;
			}
		
			.image-text_1 {
				width: 177rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
			}
		
			.section_1 {
				background-color: rgba(75, 166, 119, 1.0);
				border-radius: 12rpx;
				width: 6rpx;
				height: 24rpx;
				display: flex;
				flex-direction: column;
				margin: 8rpx 0 8rpx 0;
			}
		
			.text-group_1 {
				overflow-wrap: break-word;
				color: #333333;
				font-size: 28rpx;
				font-family: PingFangSC-Medium;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				line-height: 40rpx;
			}
		
			.list_1 {
				// height: 960rpx;
				margin-right: 8rpx;
				display: flex;
				flex-direction: column;
			}
		
			.list-items_1-0 {
				width: 710rpx;
				background-size: 100% 100%;
				margin-bottom: 20rpx;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx 0 30rpx;
				height: 120rpx;
				background: #F4F9F9;
				border-radius: 20rpx;
				align-items: center;
			}
		
			.list-items_1-1 {
				width: 86%;
				background-color: #fff;
				height: 100rpx;
				background-size: 100% 100%;
				flex-direction: row;
				display: flex;
				justify-content: space-between;
				// background: #F4F9F9;
				border-radius: 10rpx;
				align-items: center;
				padding: 0 20rpx;
			}
		
			.list-items_1-6 {
				flex-direction: row;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		
			.text_3-0 {
				overflow-wrap: break-word;
				color: rgba(102, 102, 102, 1);
				font-size: 26rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 37rpx;
				margin-left: 10rpx;
			}
		
			.text_3-1 {
				background-color: #7C9789;
				border-radius: 12rpx;
				width: 1rpx;
				height: 25rpx;
				display: flex;
				flex-direction: row;
			}
		
			.text_3-2 {
				background-color: #7C9789;
				border-radius: 12rpx;
				width: 1rpx;
				height: 25rpx;
				display: flex;
				flex-direction: row;
			}
		
			.text_4-0 {
				overflow-wrap: break-word;
				color: rgba(102, 102, 102, 1);
				font-size: 26rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 37rpx;
				margin: 0 0 0 20rpx;
				margin-left: 10rpx;
			}
		
			.text_4-1 {
				overflow-wrap: break-word;
				color: rgba(102, 102, 102, 1);
				font-size: 26rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: left;
				white-space: nowrap;
				line-height: 37rpx;
				// margin: 0 0 0 20rpx;
			}
		
			.text_5 {
				overflow-wrap: break-word;
				color: rgba(114, 158, 135, 1);
				font-size: 26rpx;
				font-family: PingFangSC-Regular;
				font-weight: normal;
				text-align: center;
				white-space: nowrap;
				line-height: 24rpx;
			}
		.conscon1 {
			padding: 20rpx;
		
			/deep/.u-tabs {
				background-color: #fff;
				// margin: 0 30rpx;
		
				.u-tabs__wrapper__nav__item {
					flex: 1;
				}
		
				.u-tabs__wrapper__nav__line {
					bottom: 0;
				}
			}
		}
		
		.add_list {
			position: relative;
			width: 710rpx;
			height: 420rpx;
			margin: 0 auto;

			.add_li_img {
				width: 710rpx;
				height: 420rpx;
				margin: 0 auto;
			}
		}

		// 列表1
		.data-list1 {

			.scroll {
				height: 100%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
			}

			.data-item {
				// margin-top: 20rpx;
				// height: 210rpx;
				// width: 690rpx;
				// background-color: #ffffff;
				// padding: 10rpx;
				// border: 0.1rpx linear-gradient(190deg, #FFF, #FFF) solid;
				// border-radius: 6rpx;
				// box-shadow: 30px 2px 10px #f9f9f9;
				padding: 20rpx 0;
				width: calc(100% - 40rpx);
				height: 194.5rpx;
				border-bottom: solid 1rpx rgb(229, 229, 229);
				padding-bottom: 20rpx;
				// margin-bottom: 20rpx;
				// padding: 20rpx 20rpx;

				.image {
					// padding-left: 10rpx;
					width: 240rpx;
					height: 154rpx;
					border-radius: 5px;

					/deep/ .u-fade-enter-to {
						height: 100%;
					}
				}

				.detail {
					height: 100%;
					width: 0;
					flex: 1;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding: 10rpx 0 10rpx 10rpx;

					.title {
						font-size: 28rpx;
						margin-bottom: 10rpx;
					}

					.tag-list {
						margin-bottom: 10rpx;

						.tag {
							font-size: 22rpx;
							border-radius: 6rpx;
							padding: 5rpx 10rpx;
							color: #4BA677;
							// background-color: #abc6fa;
							margin-right: 10rpx;
							border: 1rpx solid #4BA677;
						}
					}

					.info {
						font-weight: 700;
						font-size: 25rpx;
						color: #ff4811;
					}

					.price {
						font-size: 32rpx;
						color: #4BA677;
						font-weight: 700;
						margin-right: 10rpx;
					}

					.price-2 {
						color: #999999;
						font-size: 22rpx;
					}
				}
			}
		}
	}
</style>